<template>
  <div class="bg">
    <div class="login">
      <div class="login-bg"></div>
      <div class="login-body">
        <div class="login-title">教师登录</div>
        <Form class="login-form">
          <FormItem>
            <Input type="text" placeholder="用户名">
              <i class="iconfont icon-yonghuming" slot="prefix"></i>
            </Input>
          </FormItem>
          <FormItem>
            <Input type="password" placeholder="密码">
              <i class="iconfont icon-mima" slot="prefix"></i>
            </Input>
          </FormItem>
          <FormItem>
            <div class="me">
              <Checkbox>记住我</Checkbox>
            </div>
          </FormItem>
          <FormItem>
            <Button type="primary" class="button">登录</Button>
          </FormItem>
          <div class="agreement ivu-form-item">
            <label class="ivu-checkbox-wrapper ivu-checkbox-default">
              <Checkbox></Checkbox>
              我已同意
              <a href="https://cdn.51bolema.com/html/agreement/index.html">《伯乐码用户服务协议》</a>
            </label>
          </div>
        </Form>
        <div class="login-footer">
          <span>推荐浏览器：</span>
          <a href="https://www.google.cn/chrome/"><i class="icon-iconset0284 iconfont"></i>谷歌</a>
          <a href="http://www.firefox.com.cn/"><i class="iconfont icon-huohu"></i>火狐</a>
        </div>
      </div>
    </div>
    <div class="bottom"><span>版权所有 © 2016-2020 上海践升信息科技有限公司 沪ICP备19006290号-3</span></div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {

    }

  }
</script>
<style>
  .bg {
    width: 100%;
    height: 100%;
    background-image: url(https://cdn.51bolema.com/img/bolema_teacher_login_background_img_1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .login {
    width: 46.484375rem;
    height: 24.828125rem;
    border: 0.0625rem;
    border-radius: 1.1875rem;
    display: flex;
    background-color: #fff;
    margin-top: -11.875rem;
    margin-left: -23.4375rem;
    padding: 1.5625rem;
    position: absolute;
    left: 50%;
    top: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  .login-bg {
    width: 50%;
    height: 100%;
    background-image: url('https://cdn.51bolema.com/img/bolema_class_default.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 1.1875rem;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.15);
  }

  .login-body {
    width: 44%;
    height: 100%;
    margin-left: 6%;
    align-items: center;
    flex-direction: column;
    display: flex;
  }

  .login-title {
    color: #2d8cf0;
    font-size: 21px;
  }

  .login-form {
    width: 100%;
    height: auto;
    margin-top: 1.6875rem;
  }

  .button {
    width: 100%;
    height: 40px;
    border-radius:15px;
  }

  .login-footer {
    width: 250px;
    margin-right: 3rem;
    letter-spacing: 3px;
    font-size: 12px;
  }

  .bottom {
    position: absolute;
    margin-top: 48%;
    color: white;
    left: 37%;
    font-size: 12px;
  }

  .me {
    height: 10px;
    font-size: 12px;
  }
</style>
